<template>
	<view class="page">
		<uni-nav-bar @clickLeft="clickLeft" fixed="true" backgroundColor="#00aaff" shadow="false" leftIcon="arrowleft">
			<mSearch :mode="2" button="inside" @search="search($event)" background-color="transparent" style="margin-top: 15rpx;width: 600rpx;"></mSearch>
		</uni-nav-bar>

		<!-- 第三部分 -->

		<view class="third">
			<view class="sellers">
				<scroll-view class="scroll-Y" :scroll-y="isScroll" v-if="code==200" @scrolltolower="scrolltolower">
					<view :is-shadow="true" class="sellers_show scroll-view-item" v-for="(item,index) in sellers" :key="index" @click="choose_sellers(index)">
						<view style="display: flex;flex-direction: row;height: 100%;width: 100%;">
							<image class="image_seller" mode="scaleToFill" :src="item.logo"></image>
							<view style="display: flex;flex-direction: column; margin-left: 50rpx;">
								<view style="height: 100rpx; padding-top: 20rpx; font-size: 20px;">{{item.sellername}}</view>
								<view style="height: 100rpx; padding-top: 5rpx;display: flex;flex-direction: row;">
									<view style="font-size:13px; font-weight: 550; color: #DD524D;">{{item.star|chargeStar}}分</view>
									<view style="font-size:10px;margin-left: 20rpx; padding-top: 4px;">售出{{item.sum}}</view>
								</view>
								<view style="height: 100rpx;	font-size: 10px;">配送￥{{item.packCost}}</view>
							</view>
						</view>
					</view>
					<view class="uni-loadmore loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
				</scroll-view>
				<view style="text-align: center; margin-top: 200rpx; font-weight: 560;" v-else>
					尚无相关商铺！
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import amap from '../../../common/amap-wx.js';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import "../../../common/iconfont.css";
	import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
	import uniGrid from "@/components/uni-grid/uni-grid.vue";
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue";
	import uniCard from '@/components/uni-card/uni-card.vue';
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
	export default {
		components: {
			uniIcons,
			mSearch,
			uniGrid,
			uniGridItem,
			uniCard,
			uniNavBar
		},
		data() {
			return {
				sellers: null,
				seller: '',
				amapPlugin: null,
				key: 'b8b94f07a3ed6b73d5f5ab64e8ba7e96', //高德key
				addressName: '未获取到地址',
				isScroll: true,
				code: 500, //默认未无
				loadMoreText: "加载中...",
				showLoadMore: false,
				isLoading: false, //判断是否正在加载（锁）

			}
		},


		onLoad: function(option) {
			this.seller = option.seller;
			//获取商家名字并搜索
			uni.request({
				url: 'http://localhost:10998/searchSeller', //仅为示例，并非真实接口地址。
				data: {
					seller: this.seller,
					offset: 0,
					num: 6,
				},
				success: (res) => {
					if (res.data.code == "200") {
						this.sellers = JSON.parse(res.data.msg);
						console.log(this.sellers)
						this.code = 200;
					} else {
						this.code = 500;

					}
				}
			})

		},
		filters: {
			chargeStar(value) {
				return parseFloat(value).toFixed(1)
			}
		},
		methods: {
			// 搜索
			search(e) {
				//获取商家名字并搜索
				this.seller = e;
				uni.request({
					url: 'http://localhost:10998/searchSeller', //仅为示例，并非真实接口地址。
					data: {
						seller: this.seller,
						offset: 0,
						num: 6,
					},
					success: (res) => {
						if (res.data.code == "200") {
							this.sellers = JSON.parse(res.data.msg);
							this.code = 200;
						} else {
							this.code = 500;
							this.sellers = null;
						}

					}
				})
			},
			//滚动到底scrolltolower,上滑刷新
			scrolltolower(e) {
				this.loadMoreText = "加载中..."
				this.showLoadMore = true;
				if (!this.isLoading) { //只有当未有进程执行loading时才触发
					this.isLoading = true;
					setTimeout(() => {
						//获取此时有多少sellers的长度  
						var offset = this.sellers.length
						uni.request({
							url: 'http://localhost:10998/searchSeller', //仅为示例，并非真实接口地址。
							data: {
								seller: this.seller,
								offset: offset,
								num: 5,
							},
							success: (res) => {
								console.log(res.data)
								if (res.data.code == "200") {

									this.sellers = this.sellers.concat(JSON.parse(res.data.msg));
									console.log(this.sellers)

									this.code = 200;
									this.showLoadMore = false;
								} else {
									this.loadMoreText = "没有更多数据了！"
									setTimeout(() => {
										this.showLoadMore = false;
									}, 500)
								}
								this.isLoading = false;
							},
							fail() {
								this.isLoading = false;
							}
						})
					}, 300);
				}
			},


			choose_sellers(e) {
				console.log(e)
			},

			scroll: function(e) {
				console.log(e)
			},

			moveHandle(e) {
				console.log(e)
			},
			clickLeft() {
				uni.navigateBack()
			},





		}
	}
</script>

<style>
	.loadmore {
		margin: 16upx 0;
		width: 100%;
		background-color: #fff;
		height: 120upx;
		line-height: 120upx;
		text-align: center;
		color: #555;
		border-radius: 8upx;
	}
	.details_seller {
		display: flex;
		flex-direction: column;
		width: 450rpx;
	}

	.seller_titles {
		width: 33%;
		text-align: center;
	}

	.sellers_title {
		display: flex;
		flex-direction: row;

	}

	scroll-view ::-webkit-scrollbar {
		display: none;
	}

	.scroll-Y {
		height: 1150rpx;
	}

	.scroll-view-item {
		height: 200upx;
		font-size: 36upx;
		border-radius: 10px;
		margin: 20rpx;

		box-shadow: 0px 2px 5px #333333;
	}

	.image {
		width: 100upx;
		height: 100upx;
		align-self: center;
		margin-left: 20rpx;
	}

	.image_seller {
		width: 150upx;
		height: 150upx;
		align-self: center;
		margin-left: 20rpx;
	}

	.first {
		background: linear-gradient(#00aaff, #17B0E1);
	}

	.second {
		margin-top: 10rpx;
		background: linear-gradient(#FFFFFF, #FFFBFB);
	}

	.third {
		margin-top: 30rpx;
		background: linear-gradient(#FFFFFF, #FFFBFB);
		border-radius: (50px, 50px, 0px, 0px);
	}

	.addressIcon {
		font-size: 60rpx;
		margin-top: 5rpx;
		margin-left: 5px
	}

	.addressName {
		margin-left: 20rpx;
		/* 		margin-top: 9rpx; */
		width: 363rpx;
		/* 		height: 55rpx; */
		font-size: 30rpx;
		overflow-x: hidden;

	}

	.category_every {
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
		text-align: center;
	}

	.pushed_goods {
		margin-top: 5rpx;
		margin-right: 20rpx;

		background-color: rgba(217, 211, 210, 0.5);
		color: #ffffff;

		font-size: 25rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-radius: 25rpx;

	}

	.search_push_goods {
		display: flex;
		flex-direction: row;
		padding-left: 30rpx;
		background-color: transparent;
		margin-bottom: 10rpx;
	}

	.page {
		display: flex;
		flex-direction: column;
		/* 		margin-top: 50rpx; */
		background: linear-gradient(#FFFFFF, #FFFBFB);
	}

	.location {
		height: 73rpx;
		display: flex;
		flex-direction: row;
		padding-top: 10rpx;
	}
</style>
